<template>
	<view>
		<view class="attendance-page">
			<view class="attendance-page-head">
				<view class="attendance-page-head-circle">{{user.name}}</view>
				<view class="attendance-page-head-text">
					<view class="attendance-page-head-text-username">{{user.name}}</view>
					<view class="attendance-page-head-text-group">
						未加入考勤组
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
				<view class="2" style="float: left; margin-left: 150rpx;" @click="toa()">
					<u-icon name="clock" color="#aaaaff" size="32"></u-icon>
					<u--text  text="统计" style="padding-right: 10rpx;" size="10"></u--text>
				</view>
				<view style="float: left;margin-left: auto;">
					<u-icon name="file-text-fill" color="#2979ff" size="32"></u-icon>
					<u--text  text="考勤规则" style="padding-right: 10rpx;" size="10"></u--text>

				</view>
			</view>
			<view>
				<uni-card title="应出勤天数"  >
					<text>本月应出勤天数：31天</text>
				</uni-card>
				<uni-card title="实际出勤天数"  >
					<text>本月实际出勤天数：{{list.days}}天</text>
				</uni-card>
				<uni-card title="迟到次数"  >
					<text>本月迟到次数：{{list.late}}天</text>
				</uni-card>
				<uni-card title="早退次数"  >
					<text>本月早退数：{{list.early}}天</text>
				</uni-card>

			</view>
			<view>
				<u-button type="primary" shape="circle" text="打卡月历" @click="toStatistics()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//  用户数据
				user: {name:'牛马打工人',time:'09:01'},
				list: {
					days:'0',
					late:'0',
					early:'0',

				},
				//  打卡距离
				distance:100
			}
		},
		onLoad() {
			this.toDays(),
			this.toLate(),
			this.toEarly()
		},
		methods: {
			toStatistics(){
				uni.navigateTo({
					url:"./statistics"
				})
			},
			toa(){
				uni.navigateTo({
					url:"./statistics"
				})
			},
			toDays(){
				uni.request({
					url:'http://localhost:9525/performance/punch/getDays',
					method:'GET',
					success: (res) => {
						this.list.days=res.data.data.i
					}
				})
			},
			toLate(){
				uni.request({
					url:'http://localhost:9525/performance/punch/getLate',
					method:'GET',
					success: (res) => {
						this.list.late=res.data.data.i
					}
				})
			},
			toEarly(){
				uni.request({
					url:'http://localhost:9525/performance/punch/getEarly',
					method:'GET',
					success: (res) => {
						this.list.early=res.data.data.i
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.attendance-page {
		display: flex;
		flex-direction: column;

		.attendance-page-head {
			height: 160rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 38rpx;

			.attendance-page-head-circle {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50%;
				background-color: rgb(0, 157, 254);
				color: #FFFFFF;
				text-align: center;
				line-height: 100rpx;
				font-size: 24rpx;

			}

			.attendance-page-head-text {
				margin-left: 30rpx;
				font-size: 38rpx;
				display: flex;
				flex-direction: column;
			}
			.attendance-page-head-text-group{
				font-size: 28rpx;
				color: #3C3E49;
			}
		}

		.attendance-page-body {
			.attendance-page-body-collapse {
				.attendance-page-body-collapse-item {

					.attendance-page-body-collapse-item-title {
						font-size: 36rpx;
						margin-top:-38rpx;
						margin-bottom:5rpx;
					}

					.attendance-page-body-collapse-item-text {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
